<!--
  Component - 系统设备通用组件

  @author wangxiang 2020-03-17
-->
<template>
  <el-dialog
    class="bind_el_dialog_sys_device"
    title="添加设备"
    :visible="sysDeviceDialog"
    width="80%"
    top="10vh"
    :before-close="handleClose"
    :destroy-on-close="true"
    @open="open"
  >
    <el-row v-loading="listLoading">

      <!-- 区域树形 -->
      <el-col :span="4" :style="{ overflow: 'scroll', height: heig+'px' }">
        <el-tree
          ref="tree"
          :default-expand-all="true"
          :data="districtList"
          show-checkbox
          node-key="districtId"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps"
          @check="handleCheckEvent"
        />
      </el-col>

      <!-- 设备列表  -->
      <el-col :span="20" style="padding: 0px 15px;">
        <div>
          <el-row type="flex" justify="end">
            <div class="filter-container">
              <el-input v-model="listQuery.name" placeholder="设备名称" style="width: 200px;" class="filter-item" />
              <el-select v-model="listQuery.status" placeholder="设备类型" clearable style="width: 120px" class="filter-item">
                <el-option v-for="item in deviceStatus" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
              <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch(false)">搜索</el-button>
              <el-button v-waves class="filter-item" @click="handleSearch(true)">重置</el-button>
            </div>
          </el-row>

          <el-row>
            <!-- start 列表 -->
            <el-table
              ref="multipleTable"
              :data="list"
              border
              :fit="true"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="设备编号" prop="code" :width="200" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="设备名称" prop="name" :width="200" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="设备类型" prop="type" :width="200" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="所属区域" prop="location" :width="300" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="具体位置" prop="position" :width="300" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="handleAdd(scope.row,'draft')">
                    添加
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row type="flex" justify="space-between" style="margin-top:15px;">
            <el-button v-waves type="danger" size="small" class="filter-item" @click="handleAdd">批量添加</el-button>
            <!-- start 分页 -->
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limitSize" style="text-align:right;" @pagination="getList" />
            <!-- end 分页 -->
          </el-row>
        </div>

      </el-col>
    </el-row>

  </el-dialog>
</template>

<script>

// api
import { querySysDistrictList } from '@/api/sys/sysDistrict'
import { querySysDeviceList } from '@/api/sys/sysDevice'

import waves from '@/directive/waves' // waves directive

// 组件
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'SysDeviceComp',
  components: { Pagination },
  directives: { waves },
  props: {
    sysDeviceDialog: Boolean
  },
  data() {
    return {
      listLoading: true,
      list: [],
      total: 0,
      listQuery: {
        name: '',
        status: '',
        districtIds: [],
        page: 1,
        limit: 10
      },
      deviceStatus: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '空闲',
          value: 1
        },
        {
          name: '占用',
          value: 2
        }
      ],
      districtList: [],
      heig: 0,
      idArr: [],
      defaultProps: {
        label: 'name'
      }
    }
  },
  methods: {
    open() {
      this.getList()
      this.querySysDistrictList()
      this.heig = document.body.clientHeight * 0.5
    },
    getList() {
      this.listLoading = true
      querySysDeviceList(this.listQuery).then(response => {
        // console.log(JSON.stringify(response))
        if (response.code === 1) {
          this.list = response.data.deviceList
          this.total = response.data.totalCount
        }

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
      })
    },
    querySysDistrictList() {
      const queryParams = { parentId: '0', multistep: true }
      querySysDistrictList(queryParams).then(resp => {
        if (resp.code === 1) {
          this.districtList = resp.data.sysDistrictList
        } else {
          alert(resp.mesg)
        }
      })
    },
    handleSearch(resetFlag) {
      if (resetFlag) {
        this.name = ''
        this.status = ''
      }
      this.getList()
    },
    handleCheckEvent() {
      this.listQuery.districtIds = this.$refs.tree.getCheckedKeys()
      this.getList()
    },
    handleAdd() {
      const selectTr = JSON.parse(JSON.stringify(this.$refs.multipleTable.selection))
      if (selectTr.length === 0) {
        this.idArr = []
        alert('请选择要添加的设备信息')
      }
      selectTr.forEach(trObj => {
        this.idArr.push(trObj.deviceId)
      })
      this.$emit('deviceCompFun', this.idArr)
    },
    // 关闭弹窗
    handleClose(done) {
      this.$emit('updysdevicedialog')
    }

  }
}
</script>

<style scoped>
.dialog-fade-enter-active .el-dialog.way{
  animation: anim-open .3s;
}
.dialog-fade-leave-active .el-dialog.way{
  animation: anim-close .3s;
}
@keyframes anim-open {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes anim-close {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
</style>
